<?php
include 'connect.php';

$data_category = mysql_query("SELECT * FROM category")  or die(mysql_error()); 
$data_item = mysql_query("SELECT item.id, title, content, price, image, popularity, category.name, rating_max, rating_min  FROM item INNER JOIN category ON item.category = category.id LIMIT 0,8")  or die(mysql_error()); 

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Homepage</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type='text/javascript' src='js/jquery-1.7.1.min.js'></script>
<script type="text/javascript" src="js/jquery.tinyscrollbar.min.js"></script>
<script type="text/javascript" src="js/jquery.tinysort.min.js"></script>
<script type="text/javascript" src="js/filter.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		
		//SCROLL BAR
		$('#scrollbar1').tinyscrollbar();
		
		// SLIDER MENU RIGHT
		$("#accordion p.menu_accordion_title").addClass('open');
		//slides the element with class "menu_accordion_body" when paragraph with class "menu_accordion_title" is clicked 
		$("#accordion p.menu_accordion_title").click(function()
		{	
			var index=$(this).index();
			$(this).removeClass('close').addClass('open').next("div.menu_accordion_body").slideToggle(300,function(){
				if($("div.menu_accordion_body").eq(index/2).css("display")=='none')
				{						
					$(this).prev("#accordion p.menu_accordion_title").removeClass('open').addClass('close');
				} else {
					$(this).prev("#accordion p.menu_accordion_title").removeClass('close').addClass('open');
				}
			});
		});
		
		// GO TOP
		/* $('#gotop').click(function(){
			$('html, body').animate({ scrollTop: 0 }, 'slow');
		}) */
						
		// VALIDATE LOGIN FORM
		var username = $("#loginform input[type='text']").val();
		var password = $("#loginform input[type='password']").val();
		
		$("#loginform input[type='text']").focus(function(){
			if(username == $(this).val()) {
				$(this).val("");
			}
		});
		$("#loginform input[type='text']").focusout(function(){
			if($(this).val() == "") {
				$(this).val(username);
			}
		});
		$("#loginform input[type='password']").focus(function(){
			if(password == $(this).val()) {
				$(this).val("");
			}
		});
		$("#loginform input[type='password']").focusout(function(){
			if($(this).val() == "") {
				$(this).val(password);
			}
		});
		
		//SEARCH
		var searchvalue = $("#search input[type='text']").val();
		$("#search input[type='text']").focus(function(){
			if(searchvalue == $(this).val()) {
				$(this).val("");
			}
		});
		$("#search input[type='text']").focusout(function(){
			if($(this).val() == "") {
				$(this).val(searchvalue);
			}
		});
		
		//FIND FIRST AND LAST GIG
		$('.post-listing li').first().addClass('first');
		$('.post-listing li').last().addClass('last');
		
		
		if($('.post-listing li.display').length > 8){
			$('#scrollbar1 .viewport').css('height', 740);
		} else {
			$('#scrollbar1 .viewport').css('height',$('#scrollbar1 .viewport .overview').css('height'));
		}

	});				
</script>
</head>

<body>
	<div id="master">
		<header>
        	<div id="header_inner">
                <div id="logo">
                    <a href="#"><img src="images/logo.png" alt="logo" title="logo" /></a>
                </div>
                <div id="header-right">
                    <div class="login">
                        <form id="loginform">
                        	<div>
                                <input type="text" value="Username" />
                                <input type="password" value="Password" />
                                <input type="submit" value="" />
                            </div>
                            <div>
                            	<label>
                            		<input type="checkbox" /> Remember Me
                                </label>
                                <a href="#" class="forgot">Forgot username or password?</a>
                            </div>
                        </form>
                    </div>
                    <div class="openaccount">
                    	<a href="#">Open an account today!</a>
                    </div>
                </div>
                <div class="clearbreak"></div>
            </div>
        </header>
        <nav id="mainmenu">
        	<div id="mainmenu_inner">
            	<ul>
                	<li class="home active"><a href="index">Home</a></li>
                    <li class="account"><a href="account">Account</a></li>
                    <li class="service"><a href="#">Add service</a></li>
                    <li class="support"><a href="#">Support</a></li>
                </ul>
                <div id="search">
                	<form method="post" action="">
                    	<input type="text" value="search" />
                    </form>
                </div>
                <div class="clearbreak"></div>
            </div>            
        </nav>
        <section id="content">
        	<div id="content_inner">
            	<div id="content_inner1">
                    <div id="leftsidecontent">
                        <div class="sortby">
                            Sort by : 
                            <span class="active auto-sort">Auto</span>
                            <span class="rating-sort">Rating</span>
                            <span class="popularity-sort">Popularity</span>
                            <span class="price-sort">Price</span>
                        </div>
                        <div class="keywordarea">
                            <span class="all">
                                <span>
                                    All
                                </span>
                            </span>
                        </div>
                        <div id="scrollbar1">
                        	<div class="scrollbar-wrap"><div class="scrollbar-wrap_inner"><div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div></div></div>
                            <div class="viewport">
                            	<div class="overview">
                                    <ul class="post-listing">
										<?php
										while($item = mysql_fetch_array( $data_item )) 
										{ 
										?>
										<li class="clearafter" height="75">
                                            <div class="post-image">
                                                <a href="#"><img src="<?=$item["image"]?>" alt="post-image" title="post-image" width="105" height="69"/></a>
                                            </div>
                                            <div class="post-intro">
                                                <h1 class="title"><a href="#"><?=$item["title"] ?></a></h1>
                                                <p class="description"><?=$item["content"] ?></p>
                                            </div>
                                            <div class="post-action">
                                                <div class="price">$<?=$item["price"]?></div>                                
                                                <div class="rating">
                                                    <div class="action-thumb clearafter">
                                                        <div class="up"></div>
                                                        <div class="down"></div>
                                                    </div>
                                                    <div class="process">
                                                        <div class="green" style="width: <?=$item["popularity"] ?>%"></div>
                                                    </div>
                                                    <div class="percent clearafter">                                    	
                                                        <span class="green"><?=$item["rating_max"] ?>%</span>
                                                        -
                                                        <span class="red"><?=$item["rating_min"] ?>%</span>
                                                    </div>
                                                </div>
                                                <div class="category"><?=$item["name"] ?></div>
                                            </div>
                                        </li>
										<?php
										}
										?>
                                        <li class="loading show display">
                                        	<div>
		                                    	<img src="images/ajax-loader.gif" />
		                                    </div>
                                        </li>
                                    </ul>
									<!--
									<div class="loading show display">
                                        	<div>
		                                    	<img src="images/ajax-loader.gif" />
		                                    </div>
                                        </div>-->
                                </div>
                            </div>
                            <div id="gotop">
		                    	<div>
		                        	<div>
		                    			<span>Back to top</span>
		                            </div>
		                        </div>
		                    </div>
                        </div>
                    </div>
                    <div id="rightsidecontent">
                    	<h3>Filter</h3>
                        <div id="accordion" class="menu_accordion">
                            <p class="menu_accordion_title"><span class="icon-security">Category</span></p>
                            <div class="menu_accordion_body">
                                <ul class="filter-category">
                                	<li><span>All</span></li>
									<?php
									while($category = mysql_fetch_array( $data_category )) 
									{ 
									?>	
										<li><span><?=$category['name']?></span></li>
									<? } ?>
                                </ul>
                            </div>                            
                            <p class="menu_accordion_title"><span class="icon-security">Tag</span></p>
                            <div class="menu_accordion_body">
                                <div class="filter-tag"></div>
                            </div>
                        </div>
                    </div>
                    <div class="clearbreak"></div>                    
                </div>
            </div>
        </section>
        <footer>
        	<div id="footer_inner">
            	<div class="clearafter">
                	<div class="footer-logo">
                        <a href="#"><img src="images/logo.png" alt="logo" title="logo" /></a>
                    </div>
                    <div class="links">
                    	<ul>
                        	<li><h3>Sitemap</h3></li>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Account</a></li>
                            <li><a href="#">Add Service</a></li>
                            <li><a href="#">Support</a></li>
                        </ul>
                        <ul>
                        	<li><h3>Sitemap</h3></li>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Account</a></li>
                            <li><a href="#">Add Service</a></li>
                            <li><a href="#">Support</a></li>
                        </ul>
                    </div>
                    <div class="siteinfo">
                    	<h2>Sitename</h2>
                        <p>Etiam elementum, erat quis tristique dignissim, quam metus ultrices arcu, nec pretium sapien purus vel lacus. Nullam porta fringilla ipsum at malesuada. Aliquam purus nibh, pretium quis consequat aliquet, viverra vitae nulla. lum massa turpis, placerat.</p>
                    </div>
                    <div class="social">
                    	<div class="social_inner clearafter">                        	
                            <a href="#" class="facebook"></a>
                            <a href="#" class="twitter"></a>
                            <a href="#" class="googleplus"></a>
                            <a href="#" class="delicious"></a>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <div id="copyright">
        	<div id="copyright_inner">
        		Sitename
            </div>
        </div>
    </div>
</body>
</html>